<template>
    <div class="flex flex-col gap-2 p-8">
        <div class="flex flex-row justify-between items-center mb-4">
            <div class="text-lg font-semibold text-black-100">用户
                <span class="text-sm">列表</span>
            </div>
            <n-button type="primary" class="text-black" size="small" @click="createUserPage">新增</n-button>
        </div>
        <div class="flex flex-row gap-1">
            <n-form-item label="姓名">
                <n-input v-model:value="query.name" :clearable="true" placeholder="书籍名称"></n-input>
            </n-form-item>
            <n-form-item label="邮箱">
                <n-input v-model:value="query.email" :clearable="true" placeholder="邮箱"></n-input>
            </n-form-item>
            <n-form-item>
                <n-button type="primary" class="text-black" @click="search()">搜索</n-button>
            </n-form-item>
        </div>
        <n-data-table :columns="columns" :data="data" :pagination="pagination" />
    </div>
</template>

<script setup>
import { defineComponent, reactive, onMounted } from "vue";
import { useMessage } from "naive-ui";
import { useRoute, useRouter } from 'vue-router'

import { GetUsers } from "../../wailsjs/go/main/App.js"
import { EventsOn } from "../../wailsjs/runtime/runtime.js"
const message = useMessage();
const router = useRouter()
const query = ref({
    name:"",
    email:"",
})

onMounted(() => {
    GetUsers().then(res => {
        data.value = res
        console.log(res)
    })
})

const columns = [
    {
        title: "ID",
        key: "id"
    },
    {
        title: "姓名",
        key: "name"
    },
    {
        title: "邮箱",
        key: "email"
    },
    {
        title: "创建时间",
        key: "created_at"
    },
    {
        title: "借阅数",
        key: "borrow_count"
    }
];

const data = ref([])

const pagination = reactive({
    page: 1,
    pageSize: 5,
    showSizePicker: true,
    pageSizes: [3, 5, 7],
    onChange: (page) => {
        pagination.page = page;
    },
    onUpdatePageSize: (pageSize) => {
        pagination.pageSize = pageSize;
        pagination.page = 1;
    }
});

const search = () => {
    GetUsers(query.value.name, query.value.email).then(res => {
        data.value = res
        console.log(res)
    })
}


const createUserPage = () => {
    router.push({name: "create_user"})
}

</script>

